<template> 
	<el-card class="form-container" shadow="never">
		<el-form :model="homeAdvertise" :rules="rules" ref="homeAdvertiseFrom" label-width="150px" size="small">
			<el-form-item label="广告名称：" prop="name">
				<el-input v-model="homeAdvertise.name" class="input-width"></el-input>
			</el-form-item>
			<el-form-item label="广告位置：" prop="type">
				<el-select v-model="homeAdvertise.type">
					<el-option v-for="type in typeOptions" :key="type.value" :label="type.label" :value="type.value">
					</el-option>
				</el-select>
			</el-form-item>
			<!-- <el-form-item label="开始时间：" prop="startTime">
				<el-date-picker type="datetime" placeholder="选择日期" v-model="homeAdvertise.startTime"></el-date-picker>
			</el-form-item>
			<el-form-item label="到期时间：" prop="endTime">
				<el-date-picker type="datetime" placeholder="选择日期" v-model="homeAdvertise.endTime"></el-date-picker>
			</el-form-item> -->
			<el-form-item label="是否显示：" prop="status">
				<el-radio-group v-model="homeAdvertise.status">
					<el-radio :label="0">否</el-radio>
					<el-radio :label="1">是</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="广告图片：" prop="pic">
				<single-upload v-model="homeAdvertise.pic" :upType="homeAdvertise.type"></single-upload>
			</el-form-item>
			<el-form-item label="长图详情：" v-show="urlShow" prop="url">
				<single-upload v-model="homeAdvertise.url"></single-upload>
			</el-form-item>
			<el-form-item label="分类编号：" v-show="categoryIdShow" prop="categoryId">
				<el-input v-model="homeAdvertise.categoryId" class="input-width"></el-input>
			</el-form-item>
			<el-form-item label="商品编号：" v-show="productIdShow" prop="productId">
				<el-input v-model="homeAdvertise.productId" class="input-width"></el-input>
			</el-form-item>
			<el-form-item label="文章编号：" prop="subjectId">
				<el-input v-model="homeAdvertise.subjectId" class="input-width"></el-input>
			</el-form-item>
<!-- 			<el-form-item label="文章类型：" prop="subjectType">
				<el-select v-model="homeAdvertise.subjectType">
					<el-option v-for="type in subjectTypeOptions" :key="type.value" :label="type.label" :value="type.value">
					</el-option>
				</el-select>
			</el-form-item> -->
			<el-form-item label="排序：" prop="sort">
				<el-input v-model="homeAdvertise.sort" class="input-width"></el-input>
			</el-form-item>
			<!-- <el-form-item label="广告备注：">
				<el-input class="input-width" type="textarea" :rows="5" placeholder="请输入内容" v-model="homeAdvertise.note">
				</el-input>
			</el-form-item> -->
			<el-form-item>
				<el-button type="primary" @click="onSubmit('homeAdvertiseFrom')">提交</el-button>
				<el-button v-if="!isEdit" @click="resetForm('homeAdvertiseFrom')">重置</el-button>
			</el-form-item>
		</el-form>
	</el-card>
</template>
<script>
	import SingleUpload from '@/components/Upload/singleUpload'
	import {
		createHomeAdvertise,
		getHomeAdvertise,
		updateHomeAdvertise
	} from '@/api/homeAdvertise'
	const defaultTypeOptions = [{
			label: '首页-轮播图',
			value: 1
		},
		{
			label: '首页-活动弹框',
			value: 2
		},
		{
			label: '玩酷商城-轮播图',
			value: 3
		}, {
			label: '玩酷商城-积分兑换-轮播图',
			value: 4
		}, {
			label: '玩酷商城-所有分类-轮播图',
			value: 5
		}
	];
	const defaultHomeAdvertise = {
		name: '',
		type: 1,
		pic: null,
		url: null,
		startTime: null,
		endTime: null,
		status: 0,
		url: null,
		note: null,
		sort: 0,
		productId: 0,
		categoryId: 0,
	};
	const defaultSubjectTypeOptions = [{
			label: '科普',
			value: 0
		},
		{
			label: '其它',
			value: 1
		}
	];
	export default {
		name: 'HomeAdvertiseDetail',
		components: {
			SingleUpload
		},
		props: {
			isEdit: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				urlShow: true,
				productIdShow: true,
				categoryIdShow: true,
				homeAdvertise: {},
				rules: {
					name: [{
							required: true,
							message: '请输入广告名称',
							trigger: 'blur'
						},
						{
							min: 2,
							max: 140,
							message: '长度在 2 到 140 个字符',
							trigger: 'blur'
						}
					],
					startTime: [{
						required: true,
						message: '请选择开始时间',
						trigger: 'blur'
					}],
					endTime: [{
						required: true,
						message: '请选择到期时间',
						trigger: 'blur'
					}],
					// pic: [{
					// 	required: true,
					// 	message: '请选择广告图片',
					// 	trigger: 'blur'
					// }],
				},
				typeOptions: Object.assign({}, defaultTypeOptions),
				subjectTypeOptions: Object.assign({}, defaultSubjectTypeOptions),
			}
		},
		created() {
			if (this.isEdit) {
				getHomeAdvertise(this.$route.query.id).then(response => {
					this.homeAdvertise = response.data;
				});
			} else {
				this.homeAdvertise = Object.assign({}, defaultHomeAdvertise);
			}
		},
		methods: {
			onSubmit(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.$confirm('是否提交数据', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							if (this.isEdit) {
								console.log(this.homeAdvertise)
								updateHomeAdvertise(this.$route.query.id, this.homeAdvertise).then(response => {
									if (response.code == 200) {
										this.$message({
											message: '修改成功',
											type: 'success',
											duration: 1000
										});
										this.$router.back();
									}
								});
							} else {
								createHomeAdvertise(this.homeAdvertise).then(response => {
									if (response.code == 200) {
										this.$message({
											message: '提交成功',
											type: 'success',
											duration: 1000
										});
										this.$router.back();
									}
								});
							}
						});

					} else {
						this.$message({
							message: '验证失败',
							type: 'error',
							duration: 1000
						});
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
				this.homeAdvertise = Object.assign({}, defaultHomeAdvertise);
			}
		}
	}
</script>
<style scoped>
	.input-width {
		width: 70%;
	}
</style>
